<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
       vue中实现事件绑定
       v-on:事件名  =  函数（js）    声明式

       注意:  声明式事件后可以直接写javascript代码 ，但是一般用于编写一些简单逻辑代码  如果业务复杂不要在直接通过编写js代码实现
       在vue实例初始化时 如何设置事件的回调函数
       简化事件绑定
        v-on:事件名   => @事件名= 函数（js）

-->
<div id="app">
    <p>{{count}}</p>
    <button v-on:click="count+=1">单击事件1</button>
    <button v-on:click="add">单击事件2</button>
    <button v-on:click="addByStep(2)">单击事件3</button>
    <!--    事件绑定的简化写法  推荐 -->
    <button @click="addByStep(2)">单击事件4</button>
    <button @dblclick="addByStep(2)">双击事件5</button>
</div>

<!--
    如何在事件的回调函数中访问data中定义的响应式数据
    数据代理    初始化vue实例时data中设置的属性，在实例中会有一个相同的属性存在
-->
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            count: 1,
            age: 20,
            info: 'hello'
        },
        methods: {  //  编写事件函数
            add: function () {
                //  无法直接访问data中的count属性
                // count+=1
                // 打印输出vm实例
                console.log(vm)
                console.log(this)
                // 判定this和vm是不是同一个对象  true
                console.log(vm == this)
                // vm.count  => count get  => data count
                console.log(vm.count)
                console.log(vm.age)
                console.log(vm.info)
                // 通过this访问实例中的属性  推荐
                console.log(this.count)
                console.log(this.age)
                console.log(this.info)
                // 通过_data访问实例中的属性 _data  不建议直接访问以_开头的属性
                console.log('_data.age = ', this._data.age)
                // 改变count的值    count  set  =>    data count
                this.count++
            },
            //ES6语法
            addByStep(step) {
                this.count += step
            }
        }
    })


</script>
</body>
</html>